<template>
	<view class="index">
		<view class="tab-wrapper">
			<view class="date-item" :class="{'current':dateIndex === 0}" @click="changeDate(0)">
				{{ dayStr(0) }}
			</view>
			<view class="date-item" :class="{'current':dateIndex === 1}" @click="changeDate(1)">
				{{ dayStr(1) }}
			</view>
			<view class="date-item" :class="{'current':dateIndex === 2}" @click="changePicker">
				<text>{{dayStr(2)}}</text>
				<uni-icons type="down" size="16" color="#575A6E"></uni-icons>
			</view>
		</view>
		<view class="content-wrapper">
			<view class="item-wrapper" v-for="(item,index) in list" :key="index">
				<uni-collapse>
					<uni-collapse-item :show-animation="true" title-border="none" :open="index === 0">
						<template v-slot:title>
							<view class="title-wrapper">
								<view class="title">
									{{item.lineCode}}-{{ item.lineName }}
								</view>
							</view>
						</template>
						<view class="content" v-if="item.dispatchList.length">
							<view class="child-item" @click="goPlan(items)"
								:class="{'no-border':indexs === item.dispatchList.length - 1}"
								v-for="(items,indexs) in item.dispatchList" :key="indexs">
								<view class="child-title">
									<view class="title">
										{{ items.cityName }}
									</view>
									<view v-if="canEdit" class="status-switch" @click.stop="stop">
										<li-switch width="163" height="44" v-model="items.departStatus"
											@change="statusChange($event,items)" :async="true" bg="#1DB000"
											check_text="不发车" checked_text="正常发车"></li-switch>
									</view>
									<uni-tag size="small" v-else-if="items.departStatus" text="正常发车"
										type="success"></uni-tag>
									<uni-tag size="small" v-else-if="!items.departStatus" text="不发车"
										type="default"></uni-tag>
									<view v-if="!canEdit && items.estimatedTonnage" class="estimated">
										<text
											style="color: #555BFF;font-weight: bold;">{{ items.actualTonnage || 0 }}</text>
										<text>/{{ items.estimatedTonnage || 0 }}吨</text>
									</view>
									<view class="edit-btn" v-if="!canEdit" @click.stop="openSetTonnage(items,1)">
										编辑吨位
									</view>
									<view class="child-block"></view>
									<uni-icons type="right" size="18" color="#575A6E"></uni-icons>
								</view>
								<view class="car-content">
									<view v-if="!items.transportList || !items.transportList.length" class="no-car">
										尚未安排车辆
									</view>
									<view class="car-item" v-for="(row,rowIndex) in items.transportList"
										:key="rowIndex">
										{{ rowIndex + 1 }}、{{ row.licensePlateNo }}-{{ row.vehicleModel }}
									</view>
								</view>
								<view class="tonnage-wrapper" v-if="canEdit">
									<view class="label">
										预估吨位：
									</view>
									<view class="value">
										{{ items.estimatedTonnage ? items.estimatedTonnage + '吨' : '--' }}
									</view>
									<view class="tonnage-btn" @click.stop="openSetTonnage(items)">
										{{ items.estimatedTonnage ? '修改':'设置' }}
									</view>
								</view>
							</view>
							<view class="block"></view>
						</view>
						<view v-else class="nodata">
							<image class="nodata-image" src="../static/image/nodata.png" mode="widthFix"></image>
							<view class="nodata-text">
								暂无调度信息~
							</view>
						</view>
					</uni-collapse-item>
				</uni-collapse>
			</view>
		</view>

		<mx-date-picker :show="showPicker" type="date" format="yyyy-mm-dd" :end="today" :value="date" :show-tips="false"
			@confirm="confirmDate" @cancel="showPicker=false" />
		<uni-popup ref="popup">
			<view class="popup-wrapper">
				<view class="title-wrapper">
					{{ title }}
				</view>
				<view class="form-item">
					<!-- <view class="label">
						预估：
					</view> -->
					<view class="input-wrapper">
						<input type="digit" auto-focus v-model="estimatedTonnage" placeholder="请输入预估吨位" class="input">
					</view>
					<view class="unit">
						吨
					</view>
				</view>
				<view class="btn-wrapper">
					<view class="btn cancel" @click="close">
						取消
					</view>
					<view class="btn" @click="confirm">
						确定
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import MxDatePicker from "@/components/mx-datepicker/mx-datepicker.vue";
	export default {
		data() {
			return {
				showPicker: false,
				dateIndex: 1,
				list: [],
				selectItem: {},
				estimatedTonnage: '',
				searchDate: '',
				date: this.$helper.getDay(-1, '-'),
				today: this.$helper.getDay(0, '-'),
				title: '预估吨位',
				actualTonnage: ''
			}
		},
		onShow() {
			this.changeDate(this.dateIndex)
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo
			},
			canEdit() {
				return this.searchDate === this.$helper.getDay(1, '-')
			},
		},
		methods: {
			dayStr(type) {
				let str = '';
				if (type === 0) {
					str = '明天 ' + this.$helper.getDay(1, '-').substring(5, 10)
				} else if (type === 1) {
					str = '今天 ' + this.$helper.getDay(0, '-').substring(5, 10)
				} else if (type === 2) {
					if (this.date === this.$helper.getDay(-1, '-')) {
						str = '昨天 '
					}
					str += this.date.substring(5, 10)
				}
				return str;
			},
			async getData() {
				const data = await this.$api.post('/adm/dispatch/dispatchLineList', {
					orders: [{
						"asc": false,
						"column": "id"
					}],
					supplyWarehouseId: this.userInfo.supplyWarehouseId,
					dispatchDate: this.searchDate
				})
				if (data.code === 200) {
					data.data.forEach(item => {
						item.dispatchList.forEach(items => {
							items.departStatus = items.departStatus === 1;
						})
					})
					this.list = data.data;
				}
			},
			changePicker() {
				if (this.dateIndex === 2) {
					this.showPicker = true;
				} else {
					this.changeDate(2)
				}
			},
			confirmDate(e) {
				this.date = e.value;
				this.changeDate(2)
				this.showPicker = false;
			},
			changeDate(type) {
				this.dateIndex = type;
				if (type === 0) {
					this.searchDate = this.$helper.getDay(1, "-")
					this.getData()
				} else if (type === 1) {
					this.searchDate = this.$helper.getDay(0, "-")
					this.getData()
				} else {
					//console.log(this.date)
					if (this.date !== this.searchDate) {
						this.searchDate = this.date;
						this.getData()
					}
				}
			},
			stop() {},
			async statusChange(e, item) {
				const status = e.checked ? 1 : 0;
				await this.$api.put('/adm/dispatch', {
					id: item.id,
					departStatus: status
				})
			},
			openSetTonnage(row, type) {
				if (type) {
					this.title = '当前吨位';
					this.actualTonnage = row.actualTonnage;
				}
				this.selectItem = row;
				this.estimatedTonnage = row.estimatedTonnage;
				this.$refs.popup.open("center")
			},
			close() {
				this.$refs.popup.close()
			},
			async confirm() {
				if (!this.estimatedTonnage) {
					uni.showToast({
						title: '请输入' + this.title,
						icon: 'none'
					})
					return
				}
				if (this.title == '当前吨位' && parseFloat(this.estimatedTonnage) < parseFloat(this.actualTonnage)) {
					uni.showToast({
						title: '当前吨位不能小于已售吨位(' + this.actualTonnage + ')',
						icon: 'none'
					})
					return
				}
				await this.$api.put('/adm/dispatch', {
					id: this.selectItem.id,
					estimatedTonnage: this.estimatedTonnage
				})
				this.getData()
				this.close()
			},
			goPlan(item) {
				uni.navigateTo({
					url: '/subPage_distribution/vehiclesPlanManagement?params=' + JSON.stringify(item)
				})
			},
		},
		components: {
			MxDatePicker
		}
	}
</script>

<style lang="scss" scoped>
	.index {
		height: 100%;
		overflow: auto;
		padding-top: 125upx;

		.tab-wrapper {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 105upx;
			margin-top: 1upx;
			background-color: #ffffff;
			display: flex;
			align-items: center;

			.date-item {
				flex: 1;
				text-align: center;
				font-size: 28upx;
				color: #333333;

				&.current {
					font-size: 36upx;
					color: #555BFF;
				}
			}
		}

		.content-wrapper {
			padding: 0 24upx;

			.item-wrapper {
				background-color: #ffffff;
				padding: 30rpx 20rpx;
				border-radius: 20rpx;
				margin-bottom: 20rpx;
			}

			.title-wrapper {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.title {
					color: #141414;
					font-size: 36upx;
				}
			}

			.content {
				margin-top: 30upx;
				z-index: 0;

				.child-item {
					padding: 0 20upx;
					margin-top: 30upx;
					margin-bottom: 20upx;
					border-bottom: 1upx dashed #D3D6E3;

					&.no-border {
						border-bottom: 0;
					}

					.child-title {
						width: 100%;
						display: flex;
						align-items: center;
						font-size: 34upx;

						.title {
							margin-right: 20upx;
							color: #454545;
						}

						.estimated {
							margin-left: 20upx;
							display: flex;
							align-items: center;
							line-height: 32upx;
							font-size: 32upx;
						}

						.edit-btn {
							margin-left: 20rpx;
							background-color: #555BFF;
							color: #ffffff;
							padding: 0 10rpx;
							height: 48rpx;
							border-radius: 10rpx;
							font-size: 28rpx;
							display: flex;
							align-items: center;
							justify-content: center;
							line-height: 28rpx;
						}

						.child-block {
							flex: 1;
						}
					}

					.car-content {
						min-height: 100upx;
						padding: 20upx 0 30upx 0;
						display: flex;
						flex-direction: column;
						justify-content: center;

						.no-car {
							font-size: 28upx;
							color: #575A6E;
						}

						.car-item {
							font-size: 28upx;
							color: #575A6E;
							margin-top: 10upx;
						}
					}

					.tonnage-wrapper {
						display: flex;
						align-items: center;
						font-size: 28upx;
						color: #575A6E;
						margin-bottom: 20upx;

						.value {
							font-size: 32upx;
							color: #333333;
							font-weight: bold;
						}

						.tonnage-btn {
							width: 100upx;
							height: 50upx;
							border-radius: 10upx;
							border: 1upx solid #D6D6D6;
							color: #555BFF;
							display: flex;
							align-items: center;
							justify-content: center;
							font-size: 28upx;
							margin-left: 20upx;
						}
					}
				}

				.block {
					height: 10upx;
					width: 100%;
				}
			}

			.nodata {
				display: flex;
				align-items: center;
				justify-content: center;
				flex-direction: column;
				padding: 30upx 0;
				z-index: 0;

				.nodata-image {
					width: 150upx;
					margin-bottom: 20upx;
				}

				.nodata-text {
					font-size: 32upx;
					color: #555666;
				}

				.block {
					height: 10upx;
					width: 100%;
				}
			}
		}

		.popup-wrapper {
			width: 600upx;
			background-color: #ffffff;
			border-radius: 20upx;
			min-height: 300upx;
			overflow: hidden;

			.title-wrapper {
				height: 100upx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 32upx;
				font-size: 36upx;
				color: #2B2B2B;
			}

			.form-item {
				margin: 0 44upx;
				height: 100upx;
				display: flex;
				align-items: center;
				border-bottom: 2upx solid #f9f9f9;

				.label {
					font-size: 32upx;
					color: #5B5B5B;
				}

				.input-wrapper {
					height: 70upx;
					flex: 1;
					border: 1upx solid #dedede;
					border-radius: 10upx;
					margin-right: 15upx;

					.input {
						height: 70upx;
						width: 100%;
						text-align: center;
					}
				}
			}

			.btn-wrapper {
				height: 150upx;
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 0 40upx;

				.btn {
					width: 260upx;
					height: 76upx;
					border-radius: 40upx;
					background-color: #555BFF;
					color: #ffffff;
					display: flex;
					align-items: center;
					justify-content: center;
					transition: .15s linear;

					&:active {
						background-color: #555BFF66;
					}

					&.cancel {
						box-sizing: border-box;
						background-color: #ffffff;
						border: 2upx solid #555BFF;
						margin-right: 40upx;
						color: #555BFF;

						&:active {
							background-color: #F2F4FA77;
						}
					}
				}
			}
		}
	}
</style>